<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(link)"/>
<body>
<div id="app" class="ok-body" v-cloak>
    <!--模糊搜索区域-->
    <template>
        <div style="margin-bottom: 8px;margin-top: 8px;">
            <i-input placeholder="输入客户姓名" v-model="pro.description" style="width: 200px"></i-input>
            <i-input placeholder="输入淘宝单号" v-model="pro.tbOrder" style="width: 200px"></i-input>
            <i-input placeholder="输入客户电话" v-model="pro.phone" style="width: 200px"></i-input>
            <i-Select v-model="pro.status" placeholder="请选择状态" style="width: 200px">
                <i-Option value="" label=""></i-Option>
                <i-Option
                        v-for="item in statusList"
                        :value="item.value"
                        :key="item.value"
                >
                    {{ item.label }}</i-Option>
            </i-Select>
            <i-Select v-model="pro.userStatus" placeholder="请选择类型" style="width: 200px">
                <i-Option value="" label=""></i-Option>
                <i-Option
                        v-for="item in userStatusList"
                        :value="item.value"
                        :key="item.value"
                >
                    {{ item.label }}</i-Option>
            </i-Select>
            <i-Select v-model="pro.yearStatus" placeholder="请选择年限" style="width: 200px">
                <i-Option value="" label=""></i-Option>
                <i-Option
                        v-for="item in yearStatusList"
                        :value="item.value"
                        :key="item.value"
                >
                    {{ item.label }}</i-Option>
            </i-Select>
            <i-button type="primary" icon="ios-search" @click="load()">搜索</i-button>
            <i-button type="primary" icon="ios-redo" @click="reload()">重置</i-button>
            <i-button type="primary" style="float:right;" icon="md-add" @click="add()">新增</i-button>
        </div>
    </template>
    <template>
        <i-table size="small" :columns="tableTitle" :data="tableData">
        </i-table>
        <br>
        <Page style="float: right;" :current="pro.pageNo" :total="tableSize" :page-size="pro.pageSize"
              @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer show-total></Page>
    </template>
</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
    layui.use(["okUtils", "okLayer"], function () {
        var okUtils = layui.okUtils;
        var okLayer = layui.okLayer;
        var vm = new Vue({
            el: '#app',
            data: function () {
                var that = this;
                return {
                    tableTitle: [{
                        title: '序号',
                        minWidth: 100,
                        render: function (h, params) {
                            return h('span', params.index + (that.pro.pageNo - 1) * that.pro.pageSize + 1);
                        }
                    }, {
                        key: "tbOrder",
                        title: "淘宝单号",
                        minWidth: 100
                    }, {
                        key: "userName",
                        title: "客户名称",
                        minWidth: 100
                    }, {
                        key: "phone",
                        title: "客户电话",
                        minWidth: 100
                    }, {
                        key: "money",
                        title: "项目金额",
                        minWidth: 100
                    }, {
                        key: "appletName",
                        title: "小程序名称",
                        minWidth: 100
                    }, {
                        key: "status",
                        title: "状态",
                        minWidth: 100
                    }, {
                        key: "userStatus",
                        title: "账号类型",
                        minWidth: 100
                    }, {
                        key: "yearStatus",
                        title: "年限",
                        minWidth: 100
                    }, {
                        key: "gmtCreate",
                        title: "创建时间",
                        sortable: true,
                        minWidth: 150
                    }, {
                        title: '操作',
                        key: 'action',
                        minWidth: 200,
                        align: 'center',
                        render: function (h, params) {
                            var functionList = [];
                            var edit = h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                    icon: 'md-create'
                                },
                                style: {
                                    marginRight: '4px'
                                },
                                on: {
                                    click: function () {
                                        vm.edit(params.row);
                                    }
                                }
                            }, '修改');
                            functionList.push(edit);
                            var remove = h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                    icon: 'md-trash'
                                },
                                style: {
                                    marginRight: '8px'
                                },
                                on: {
                                    click: function () {
                                        vm.remove(params.row);
                                    }
                                }
                            }, '删除');
                            functionList.push(remove);
                            return h('div', functionList);
                        }
                    }],
                    tableData: [],
                    pro: {
                        pageSize: 10,
                        pageNo: 1,
                        tbOrder: '',
                        phone: '',
                        status: null,
                        userStatus: null,
                        yearStatus: null,
                        description: ''
                    },
                    tableSize: 50,
                    statusList: [{"label": "售前", "value": 0}, {"label": "开发中", "value": 1}, {
                        "label": "售后", "value": 2}, {"label": "已退款", "value": 3}],
                    userStatusList: [{"label": "个人号", "value": 0}, {"label": "企业号", "value": 1}],
                    yearStatusList: [{"label": "一年", "value": 0}, {"label": "两年", "value": 1}, {"label": "三年", "value": 2}
                        , {"label": "四年", "value": 3}, {"label": "五年", "value": 4}],
                }
            },
            methods: {
                load: function () {
                    var that = this;
                    console.log("打印" + this.pro.status)
                    okUtils.ajaxCloud({
                        url: "/sys/project/list",
                        param: that.pro,
                        success: function (result) {
                            that.tableData = result.msg.pageData;
                            Object.keys(that.tableData).forEach(function (key) {
                                switch (that.tableData[key].status) {
                                    case 0:
                                        that.tableData[key].status = "售前";
                                        break;
                                    case 1:
                                        that.tableData[key].status = "开发中";
                                        break;
                                    case 2:
                                        that.tableData[key].status = "售后";
                                        break;
                                    case 3:
                                        that.tableData[key].status = "已退款";
                                        break;
                                }
                                switch (that.tableData[key].userStatus) {
                                    case 0:
                                        that.tableData[key].userStatus = "个人号";
                                        break;
                                    case 1:
                                        that.tableData[key].userStatus = "企业号";
                                        break;
                                }
                                switch (that.tableData[key].yearStatus) {
                                    case 0:
                                        that.tableData[key].yearStatus = "一年";
                                        break;
                                    case 1:
                                        that.tableData[key].yearStatus = "两年";
                                        break;
                                    case 2:
                                        that.tableData[key].yearStatus = "三年";
                                        break;
                                    case 3:
                                        that.tableData[key].yearStatus = "四年";
                                        break;
                                    case 4:
                                        that.tableData[key].yearStatus = "五年";
                                        break;
                                }
                            });
                            that.tableSize = result.msg.totalCount;
                        }
                    });
                },
                reload: function () {
                    vm.pro.pageSize = 10;
                    vm.pro.pageNo = 1;
                    vm.pro.tbOrder = '';
                    vm.pro.phone = '';
                    vm.pro.status = 0;
                    vm.pro.userStatus = 0;
                    vm.pro.yearStatus = 0;
                    vm.pro.description = '';
                    this.load();
                },
                changePage: function (pageNo) {
                    vm.pro.pageNo = pageNo;
                    vm.load();
                },
                changePageSize: function (pageSize) {
                    vm.pro.pageSize = pageSize;
                    vm.load();
                },
                edit: function (pro) {
                    okUtils.dialogOpen({
                        title: '修改',
                        url: "sys/project/form.html",
                        scroll: true,
                        width: '40%',
                        height: '90%',
                        success: function (dialog) {
                            dialog.vm.pro = JSON.parse(JSON.stringify(pro));
                        },
                        yes: function (dialog) {
                            dialog.vm.acceptClick(vm);
                        }
                    });
                },
                add: function () {
                    okUtils.dialogOpen({
                        title: '新增',
                        url: "sys/project/form.html",
                        scroll: true,
                        width: '40%',
                        height: '90%',
                        yes: function (dialog) {
                            dialog.vm.acceptClick(vm);
                        }
                    });
                },
                remove: function (pro) {
                    okLayer.confirm("确定要删除吗？", function () {
                        okUtils.ajaxCloud({
                            url: "/sys/project/delete",
                            param: {id: pro.id},
                            success: function (result) {
                                okLayer.msg.greenTick(result.msg, function () {
                                    vm.load();
                                });
                            }
                        });
                    })
                },
            },
            created: function () {
                this.load()
            }
        })
    });
</script>
</body>
</html>
